
<template>
    <el-form 
    
    ref="form" 
    :inline="true" 
    :model="form" 
    
    label-width="80px" 
    enctype="multipart/form-data" >
        
        <h1 class='title'>
                    <i class='el-icon-warning'></i>
                    <span>基础信息</span>
        </h1>
        <el-form-item 
        label="客户名"
       
         >
            <el-input  v-model="form.name" placeholder="客户名"></el-input>
        </el-form-item>
        <el-form-item 
        label="客户电话"
       
         >
            <el-input  v-model="form.phone" placeholder="客户电话"></el-input>
        </el-form-item>
    
        <el-form-item label="地区">
            <el-radio-group v-model="form.where">
                <el-radio  v-for="item in wheres" :label="item" :key="item">{{item}}</el-radio>
                
            </el-radio-group>
        </el-form-item>
        <el-form-item label="客户楼盘">
            <el-input
            v-model="form.local"
            placeholder="请填入客户楼盘"
            >
            </el-input>
        </el-form-item>
        <el-form-item label="录入人">
            <el-input
            v-model="userName"
            :disabled="true"
            >
            </el-input>
        </el-form-item>

        <el-form-item label="指定导购">
            <el-input
            v-model="form.guider"
            placeholder="请填入导购名"
            >
            </el-input>
        </el-form-item>
        <el-form-item label="客户归属">
            <el-select filterable v-model="form.belong" placeholder="客户归属">
            <el-option 
            v-for="item in form.belongList" 
            :key="item.id" 
            :label="item.belongname" 
            :value="item.id"></el-option>
            
            </el-select>
        </el-form-item>
        <br>
        <el-form-item label="客户购买">
            <el-checkbox-group 
            v-model="checkedbuy">
                <el-checkbox v-for="item in buy" :label="item" :key="item">{{item}}</el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <br>
        <el-form-item label="信息渠道">
            <el-radio-group v-model="news">
                <el-radio  v-for="item in newsList" :label="item" :key="item">{{item}}</el-radio>
                
            </el-radio-group>
        </el-form-item>

       
        <h1 class='title'>
                    <i class='el-icon-warning test'></i>
                    <span>特殊信息</span>
        </h1>
        <el-form-item label="订金金额">
            <el-input  
            v-model="form.price" 
            placeholder="订金金额"></el-input> 
        </el-form-item>
        <el-form-item label="订单折扣">
            <el-input  
            v-model="form.discount" 
            placeholder="订单折扣"></el-input>   
        </el-form-item>
        <el-form-item label="合同金额">
            <el-input  
            v-model="form.contract" 
            placeholder="合同金额"></el-input>
        </el-form-item>

        <div class='picUp'>
            <el-form-item label="订单图集">
                <el-upload
                ref="upload"
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :before-upload="beforeupload"
                :multiple="true"
                :auto-upload="false"
                enctype="multipart/form-data"
                :file-list="fileList">
                <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible" >
                <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            
        </div>
        
        
       
        
        <br>
        <el-form-item label="附送礼品">
            <el-checkbox-group v-model="checkGifts">
                <el-checkbox-button 
                v-for="gift in gifts" 
                :label="gift" 
                :key="gift">{{gift}}</el-checkbox-button>
            </el-checkbox-group>
        </el-form-item>
        <br>
       
        
         <el-form-item label="跟单进度">
            <el-radio v-for="item in follow" 
            :label="item" 
            :key="item" 
            v-model="checkedFollow" border>{{item}}</el-radio>
        </el-form-item>
       
        <Editor @getEditorData="getEditorData" :url='url'></Editor>


        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</template>


<script>
import axios from 'axios'
import { mapState,mapMutations } from 'vuex'
import Editor from 'index/components/Editor'

// const gifts = ['被子', '刀具', '坐垫', '水杯'];
const buy = ['橱柜','衣柜','门','其他不明'];
const wheres = ['长沙','外地'];
const follow = ['跟进中','已上门','已订单','客户流失','已合同'];
// const newsList = ['官网','天猫','京东','淘宝'];
export default {
    name:'ProcutForm',  
    components:{
        Editor 
    },
    data() {
        return {
            url:'cms/content',
            alert:'hahaha',
            news:'',
            newsList:[],
            buy: buy,
            checkedbuy: [],
            follow:follow,
            checkedFollow: [],
            wheres: wheres,
           
            gifts: [],
            checkGifts: [],
            editorData: '',
            form: {
                name: '',
                guider:'',
                local:'',
                where:[],
                belong: '',
                belongList:[],
                price:0,
                discount:10,
                phone:'',
                contract:0
                
            },
            formData: new FormData(),
            dialogImageUrl: '',
            dialogVisible: false,
            fileList:[],
            i:1
        }
    },
    activated() {
        this.giftsInit();
        // console.log(this.url)
    },
    mounted() {
        this.giftsInit();
        // console.log(this.url)
    },
    computed:{
        ...mapState(['baseUrl','userName']),
        totalUrl(){
            return this.baseUrl+'cms/content';
        }
    },
    methods: {
        giftsInit (){
            // console.log('activated')
            this.url = this.totalUrl;
            this.form.price = 0;
            this.form.contract = 0;
            this.form.discount = 10;
            axios.get(
                this.baseUrl+'cms/getGifts',{
                    params: {
                    id: false
                    }
                })
            .then(this.getGiftsSucc)
            axios.get(
                this.baseUrl+'cms/getNews',{
                    params: {
                    id: false
                    }
                })
            .then(this.getNewsSucc)
            axios.get(
                this.baseUrl+'cms/getBelong',{
                    params: {
                    id: true
                    }
                })
            .then(this.getBelongSucc)
        }, 
        getBelongSucc (result){       
            // console.log(result)
            this.form.belongList = result.data;
        },
        getGiftsSucc (result){       
            this.gifts = result.data;
        },
        getNewsSucc (result){
            this.newsList = result.data;
        },
        resetForm(formName) {
        this.$refs[formName].resetFields();
      },
        discountChange(value) {
        this.form.discount = value
        },
        priceChange(value) {
        this.form.price = value
        },
        getEditorData(val) {
           this.editorData = val 

        } ,
         //阻止upload的自己上传，进行再操作
        beforeupload(file) {
            // console.log(file);
            //创建临时的路径来展示图片
            var windowURL = window.URL || window.webkitURL;
            
            this.dialogImageUrl = windowURL.createObjectURL(file);
            
           
           
            this.formData.append('file[]', file)
           
            
            return false;
        },
        //覆盖默认的上传行为
        httprequest() {

        },
        onSubmit() {
             let that = this
            
            // console.log(param)
            var name = this.form.name;
            var phone = this.form.phone;
            var discount =this.form.discount; 
            var price =this.form.price;
            var inputname =this.userName;
            var guider =this.form.guider;
            var belong = this.form.belong;
            var buy = this.checkedbuy;
            var news = this.news;
            var where = this.form.where;
            var gifts = this.checkGifts;
            var checkedFollow = this.checkedFollow;
            var content =this.editorData; 
            var local = this.form.local; 
            var contract = this.form.contract; 
            
            // console.log(this.checkboxGroup1);
            if(name==''||phone==''||belong==''||where==''||news==''){
                const h = this.$createElement;

                this.$notify({
                title: '警告',
                type: 'warning',
                offset: 100,
                message: h('i', { style: 'color: teal'}, '请填写所有客户信息')
                });
                return false;
            }
            //下面append的东西就会到form表单数据的fields中；
            that.formData.append('name', name);
            that.formData.append('phone', phone);
            that.formData.append('discount', discount);
            that.formData.append('price', price);
            that.formData.append('inputname', inputname);
            that.formData.append('guider', guider);
            that.formData.append('belong', belong);
            that.formData.append('buy',buy);
            that.formData.append('where',where);
            that.formData.append('local',local);
            that.formData.append('contract',contract);
            that.formData.append('function',news);
            that.formData.append('gifts',gifts);
            that.formData.append('follow',checkedFollow);
            that.formData.append('remarks',content);
            
           
             
            
            // console.log(that.formData)
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                    
                },
                
                
            }
            that.$refs.upload.submit();
            // console.log(this.formData.getAll("file"))
            axios.post(this.baseUrl+"cms/add", this.formData, config).then(function(result) {
                            // console.log(result);
                            // alert(result.data);

                            that.formData.delete('file[]');
                            if(result.data.errno===1){
                                
                                that.$confirm('此电话已经存在，请联系'+result.data.result.inputman
, '特别提示', {
                                confirmButtonText: '确定',
                                closeOnClickModal:true,
                                center:true,
                                callback: action => {
                                    // console.log(result.data.result.inputman)
                                    that.$router.push('/CMS/CMSList');
                                    that.form={brand_right:0}
                        
                                    that.changeActive('/CMS/CMSList') 
                                    that.changeInfo(true) 
                                    
                                }
                            });
                            }
                            if(result.data.errno===0){
                                that.$alert('新增成功', '特别提示', {
                                confirmButtonText: '确定',
                                closeOnClickModal:true,
                                center:true,
                                callback: action => {
                                    that.$router.push('/CMS/CMSList');
                                    that.form={brand_right:0}
                                    
                                    that.changeActive('/CMS/CMSList') 
                                    that.changeInfo(true) 
                                    that.$message({
                                    message: '恭喜你，这是一条成功消息',
                                    type: 'success',
                                    duration:'3000',
                                    showClose:true,
                                    });
                                }
                            });
                                
                            }


                            
            })
            that.$refs.upload.clearFiles();

        },
         ...mapMutations(['changeInfo','changeActive']),
        handleRemove(file, fileList) {
        // console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
        // console.log(handlePictureCardPreview);
      }
       
    }
}
</script>
<style lang="stylus">
.title
    font-size 18px
    width 98%
    margin 1%
    border-bottom 1px solid #eef1f5
    padding-bottom 20px
    .el-icon-warning
        color #67C23A
    .test
        color #F56C6C    
.el-message-box__wrapper
    z-index 20003!important
.el-dialog__wrapper
    z-index 20003!important
</style>
